<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小滴课堂-练习版</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
    <script src="http://at.alicdn.com/t/c/font_4821458_ka0ytkxei.js"></script>
  </head>
  <body>
    <!-- 整个项目 -->
    <div class="education">
      <!-- 首页顶部制作 -->
      <div class="top">
        <!-- 顶部图片 -->
        <div class="top_img">
          <img src="./img/hd.jpg" alt="" />
        </div>
        <!-- 顶部导航 -->
        <div class="top_nav">
          <div class="top_nav_left">
            <img src="./img/title.png" alt="" />
            <div>首页</div>
            <div>课程中心</div>
            <div>超级会员</div>
            <div>学习路线</div>
            <div>一对一辅导</div>
            <div>工具</div>
            <div>回答论坛</div>
            <input type="text" />
            <svg class="sousuo" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
          </div>
          <div class="top_nav_right">
            <div>课程骨折</div>
            <div>云服务器</div>
            <div>课程兑换码</div>
            <svg class="vip" aria-hidden="true">
              <use xlink:href="#icon-VIP"></use>
            </svg>
            <div>我的学习</div>
            <svg class="nav_touxiang" aria-hidden="true">
              <use xlink:href="#icon-touxiang"></use>
            </svg>
          </div>
        </div>
      </div>
      <!-- 首页轮播图 -->
      <div class="banner">
        <!-- 轮播图左侧 -->
        <div class="banner_left">
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
          <div class="banner_left_soft">
            后端&架构
            <svg class="xiangyou" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use>
            </svg>
          </div>
        </div>
        <!-- 轮播图右侧 -->
        <div class="banner_right">
          <img src="./img/banner.jpg" alt="" />
        </div>
      </div>
      <!-- 热门课程 -->
      <div class="hot">
        <!-- 热门课程标题 -->
        <div class="hot_title">
          <div class="hot_title_top">热门课程</div>
          <div class="hot_title_bottom">Hot Courses</div>
        </div>
        <!-- 热门课程 -->
        <div class="hot_course">
          <div class="hot_course_kc">
            <div class="kc_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <div class="kc_item">
              <div class="kc_item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <div class="kc_item_jibie">
                <div>级别：高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <div class="kc_item_number">
                <!-- 左下角的人数 -->
                <div class="kc_item_number_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <!-- 右下角的价格 -->
                <div class="kc_item_number_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="hot_course_kc">
            <div class="kc_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <div class="kc_item">
              <div class="kc_item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <div class="kc_item_jibie">
                <div>级别：高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <div class="kc_item_number">
                <!-- 左下角的人数 -->
                <div class="kc_item_number_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <!-- 右下角的价格 -->
                <div class="kc_item_number_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="hot_course_kc">
            <div class="kc_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <div class="kc_item">
              <div class="kc_item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <div class="kc_item_jibie">
                <div>级别：高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <div class="kc_item_number">
                <!-- 左下角的人数 -->
                <div class="kc_item_number_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <!-- 右下角的价格 -->
                <div class="kc_item_number_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
          <div class="hot_course_kc">
            <div class="kc_img">
              <img src="./img/hot_list.jpeg" alt="" />
            </div>
            <div class="kc_item">
              <div class="kc_item_title">
                海量数据处理-商用短链平台项目大课【预售特价中】
              </div>
              <div class="kc_item_jibie">
                <div>级别：高级</div>
                <div>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-huo"></use>
                  </svg>
                </div>
              </div>
              <div class="kc_item_number">
                <!-- 左下角的人数 -->
                <div class="kc_item_number_left">
                  <svg class="huo" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  332
                </div>
                <!-- 右下角的价格 -->
                <div class="kc_item_number_right">
                  <span class="left">￥3999</span>
                  <span class="right">￥2999</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 间隔 -->
      <div class="split_line"></div>
      <!-- 最新课程 -->
      <div class="new">
        <!-- 最新课程标题 -->
        <div class="hot_title">
          <div class="hot_title_top">最新课程</div>
          <div class="hot_title_bottom">New Courses</div>
        </div>
        <!-- 最新课程 -->
        <div class="new_course">
          <div class="new_course_left">
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hot_course_kc">
              <div class="kc_img">
                <img src="./img/hot_list.jpeg" alt="" />
              </div>
              <div class="kc_item">
                <div class="kc_item_title">
                  海量数据处理-商用短链平台项目大课【预售特价中】
                </div>
                <div class="kc_item_jibie">
                  <div>级别：高级</div>
                  <div>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"></use>
                    </svg>
                  </div>
                </div>
                <div class="kc_item_number">
                  <!-- 左下角的人数 -->
                  <div class="kc_item_number_left">
                    <svg class="huo" aria-hidden="true">
                      <use xlink:href="#icon-touxiang"></use>
                    </svg>
                    332
                  </div>
                  <!-- 右下角的价格 -->
                  <div class="kc_item_number_right">
                    <span class="left">￥3999</span>
                    <span class="right">￥2999</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="new_course_right">
            <img src="./img/new_img.jpeg" alt="" />
          </div>
        </div>
      </div>

      <!-- 首页底部制作 -->
      <div class="foot">
        <div class="foot_top">
          <svg class="icon_item" aria-hidden="true">
            <use xlink:href="#icon-weibo"></use>
          </svg>
          <svg class="icon_item" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
          <svg class="icon_item" aria-hidden="true">
            <use xlink:href="#icon-qq"></use>
          </svg>
        </div>
        <div class="foot_center">
          <div>关于我们</div>
          <div>关于我们</div>
          <div>关于我们</div>
          <div>关于我们</div>
          <div>关于我们</div>
          <div>关于我们</div>
        </div>
        <div class="foot_bottom">
          Copyright © 2018 Company,lnc.粤ICP备15092968号 Trems
        </div>
      </div>
    </div>
  </body>
</html>
